<template>
  <div class="person-info">
    <div class="resume-container">
      <!-- 打印按钮 -->
      <div class="print-btn" @click="handlePrint">
        <i class="icon-print"></i>
        保存为PDF
      </div>
      <!-- 基本信息 -->
      <section class="basic-info">
        <div class="avatar">
          <img :src="resumeData.basicInfo.avatar" :alt="resumeData.basicInfo.name">
        </div>
        <div class="info">
          <h1>{{ resumeData.basicInfo.name }}</h1>
          <h2>{{ resumeData.basicInfo.title }}</h2>
          <div class="contact-info">
            <p><i class="icon-phone"></i>{{ resumeData.basicInfo.phone }}</p>
            <p><i class="icon-email"></i>{{ resumeData.basicInfo.email }}</p>
            <p><i class="icon-location"></i>{{ resumeData.basicInfo.location }}</p>
          </div>
        </div>
      </section>

      <!-- 教育经历 -->
      <section class="section">
        <h3>教育经历</h3>
        <div class="education-list">
          <div v-for="(edu, index) in resumeData.education" :key="index" class="education-item">
            <h4>{{ edu.school }}</h4>
            <p>{{ edu.degree }}</p>
            <p>{{ edu.period }} | GPA: {{ edu.gpa }}</p>
          </div>
        </div>
      </section>

      <!-- 工作经历 -->
      <section class="section">
        <h3>工作经历</h3>
        <div class="work-list">
          <div v-for="(work, index) in resumeData.workExperience" :key="index" class="work-item">
            <div class="work-header">
              <h4>{{ work.company }}</h4>
              <span class="period">{{ work.period }}</span>
            </div>
            <p class="position">{{ work.position }}</p>
            <ul class="highlights">
              <li v-for="(highlight, hIndex) in work.highlights" :key="hIndex">
                {{ highlight }}
              </li>
            </ul>
          </div>
        </div>
      </section>

      <!-- 技能 -->
      <section class="section">
        <h3>技能特长</h3>
        <div class="skills-list">
          <div v-for="(skillGroup, index) in resumeData.skills" :key="index" class="skill-group">
            <h4>{{ skillGroup.category }}</h4>
            <div class="skill-tags">
              <span v-for="(skill, sIndex) in skillGroup.items" :key="sIndex" class="skill-tag">
                {{ skill }}
              </span>
            </div>
          </div>
        </div>
      </section>

      <!-- 项目经验 -->
      <section class="section">
        <h3>项目经验</h3>
        <div class="project-list">
          <div v-for="(project, index) in resumeData.projects" :key="index" class="project-item">
            <div class="project-header">
              <h4>{{ project.name }}</h4>
              <span class="role">{{ project.role }}</span>
            </div>
            <p class="description">{{ project.description }}</p>
            <div class="tech-tags">
              <span v-for="(tech, tIndex) in project.technologies" :key="tIndex" class="tech-tag">
                {{ tech }}
              </span>
            </div>
          </div>
        </div>
      </section>

      <!-- 证书 -->
      <section class="section">
        <h3>证书</h3>
        <div class="certificate-list">
          <div v-for="(cert, index) in resumeData.certificates" :key="index" class="certificate-item">
            <h4>{{ cert.name }}</h4>
            <p>{{ cert.issuer }} | {{ cert.date }}</p>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { resumeData } from './data';

export default {
  name: 'PersonInfo',
  data() {
    return {
      resumeData
    }
  },
  metaInfo: {
    meta: [
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
      }
    ]
  },
  methods: {
    handlePrint() {
      // 保存当前滚动位置
      const scrollPos = window.scrollY;
      
      // 设置打印样式
      const style = document.createElement('style');
      style.innerHTML = `
        @page {
          size: A4;
          margin: 20mm;
        }
        @media print {
          html, body {
            height: auto !important;
            overflow: visible !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
          }
          .resume-container {
            height: auto !important;
            overflow: visible !important;
          }
        }
      `;
      document.head.appendChild(style);

      // 滚动到顶部
      window.scrollTo(0, 0);

      // 延迟打印以确保内容完全加载
      setTimeout(() => {
        window.print();
        // 打印完成后恢复滚动位置并移除样式
        window.scrollTo(0, scrollPos);
        document.head.removeChild(style);
      }, 500);
    }
  },
  mounted() {
    // 生命周期钩子
  }
}
</script>

<style lang="less" scoped>
@import './index.less';

.print-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  background: #1890ff;
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
  transition: all 0.3s ease;
  z-index: 100;

  &:hover {
    background: #40a9ff;
    transform: translateY(-1px);
  }

  i {
    font-size: 16px;
  }

  @media print {
    display: none;
  }
}
</style> 